import React, { Component } from 'react'
import './index.less'
import { Form, Input, Button, Row, Col } from 'antd';
const FormItem = Form.Item;

class WeeklyForm4 extends Component {

  handleSubmit = (e) => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        this.props.submit(values, {type1: 'data4', type2: 'modifyRecord4', type3: 'modalVisible4'});
      }
    });
  }

  close = () => {
    this.props.close();
  }

  render() {
    const { getFieldDecorator } = this.props.form;
    const formItemLayout = {
      labelCol: { span: 5 },
      wrapperCol: { span: 19 },
    };
    return (
      <Form onSubmit={this.handleSubmit} className="weekly-form">
        <Row gutter={40} className="weekly-form-row">
            <Col span={12}>
            <FormItem label="序号" {...formItemLayout}>
                {getFieldDecorator('index', {
                  rules: [{ required: true, message: '请输入序号！' }],
                  initialValue: this.props.modifyRecord.index || this.props.index
                })(
                  <Input placeholder="序号" disabled />
                )}
              </FormItem>
            </Col>
            <Col span={12}>
              <FormItem label="内容" {...formItemLayout}>
                {getFieldDecorator('name', {
                  rules: [{ required: true, message: '请输入内容！' }],
                  initialValue: this.props.modifyRecord.name
                })(
                  <Input placeholder="内容" />
                )}
              </FormItem>
            </Col>
            <Col span={12}>
              <FormItem label="目前值" {...formItemLayout}>
                {getFieldDecorator('result', {
                  rules: [{ required: true, message: '请输入目前值！' }],
                  initialValue: this.props.modifyRecord.result
                })(
                  <Input placeholder="目前值" />
                )}
              </FormItem>
            </Col>
            <Col span={12}>
              <FormItem label="目标值" {...formItemLayout}>
                {getFieldDecorator('target', {
                  rules: [{ required: true, message: '请输入目标值！' }],
                  initialValue: this.props.modifyRecord.target
                })(
                  <Input placeholder="目标值" />
                )}
              </FormItem>
            </Col>
        </Row>
        <Row>
          <Col className="butttn-group" span={24}>
            <Button type="primary" htmlType="submit">
                添加
            </Button>
            <Button style={{marginLeft: 15}} type="primary" onClick={this.close}>取消</Button>
          </Col>
        </Row>
    </Form>
    )
  }
}
export default Form.create()(WeeklyForm4);
